<div class="x-blog" ng-init="vm.init();refresh();">
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">共享博客平台</div>
      <div class="pull-right" style="margin-left:4px" ng-if="sessionUser.role">
        <a href="#!/markdown-editor" class="btn btn-primary" target="_blank">写博客</a>
      </div>
      <div class="pull-right x-search">
        <form ng-submit="vm.search()" novalidate>
          <div class="input-group">
            <input type="text" class="form-control" ng-model="vm.query" placeholder="标题或标签" autofocus>
            <span class="input-group-btn">
              <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div class="col-md-4 x-blog-category">
      <div class="list-group">
        <a href="javascript:void(0)" class="list-group-item" ng-repeat="category in vm.categories"
            ng-mouseleave="category.show = false" ng-mouseover="category.show = true"
            ng-class="{'active': vm.selected == category.id}"
            ng-click="vm.changeCategory(category.id, vm.selected != category.id);vm.selected = category.id">
          <span class="badge badge-info">{{category.count | number}}</span>{{category.name}}
          <span class="pull-right" ng-if="sessionUser.role && category.root" ng-show="category.show">
            <button type="button" class="btn btn-default btn-xs" ng-click="vm.editCategory();$event.stopPropagation()"
                title="添加"><i class="fa fa-plus"></i></button>
          </span>
          <span class="pull-right" ng-if="!category.root" ng-show="category.show">
            <button type="button" class="btn btn-success btn-xs" title="编辑" ng-if="sessionUser.role"
                ng-click="vm.editCategory(category);$event.stopPropagation()"><i class="fa fa-pencil"></i></button>
            <button type="button" class="btn btn-danger btn-xs" ng-if="sessionUser.role == 'admin' && category.count == 0"
                title="删除" ng-click="vm.removeCategory(category);$event.stopPropagation()"><i class="fa fa-trash-o"></i></button>
          </span>
        </a>
      </div>
    </div>
    <div class="col-md-8 x-blog-article">
      <div class="container-fluid">
        <div ng-if="vm.articles.length > 0">
          <div class="row" ng-repeat="article in vm.articles">
            <div class="col-md-12">
              <div class="pull-right">
                <a ng-href="{{'#!/markdown-editor?blogid=' + article.id}}" class="btn btn-success btn-xs" title="编辑"
                    target="_blank" ng-if="sessionUser.role"><i class="fa fa-pencil"></i></a>
                <button type="button" class="btn btn-danger btn-xs" ng-click="vm.removeArticle(article)" title="删除"
                    ng-if="sessionUser.role == 'admin'"><i class="fa fa-trash-o"></i></button>
              </div>
              <h3><a ng-href="{{'#!/blog-viewer?blogid=' + article.id}}" target="_blank">{{article.title}}</a></h3>
              <p>{{article.snapshot}}</p>
              <p>
                <span class="label label-default" ng-repeat="tag in article.tags">{{tag}}</span>
                <span class="pull-right">{{article.modifier}}&nbsp;{{article.modified | date:'yyyy-MM-dd HH:mm'}}</span>
              </p>
            </div>
          </div>
          <div class="text-center">
            <uib-pagination total-items="vm.page.total" ng-model="vm.page.current" max-size="5" first-text="<<"
                previous-text="<" next-text=">" last-text=">>" boundary-links="true" boundary-link-numbers="true"
                items-per-page="vm.page.size" ng-change="vm.changePage(vm.page.current)">
            </uib-pagination>
          </div>
        </div>
        <div ng-if="vm.articles.length == 0 && vm.query != ''" class="text-center">
          <br><br>
          <h4>没有找到您想要的博客，您可以点击<a ng-href="{{'https://www.baidu.com/s?wd=' + vm.query}}"
              target="_blank">百度</a>或<a href="{{'https://www.google.com/search?q=' + vm.query}}"
              target="_blank">Google</a>搜索一下！</h4>
        </div>
      </div>
    </div>
  </div>
</div>
